<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_事件的修饰符</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            margin-top: 50px;
        }
        .box1 {
            height: 30px;
            background-color: green;
        }
        ul {
            width: 100px;
            height: 400px;
            background-color: orange;
            overflow: scroll;
        }
        li {
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="root">
        <!--    prevent阻止事件的默认行为 vue的阻止事件的默认行为 在click后面加一个prevent的修饰符 -->
        <a href="http://www.atguigu.com" @click.prevent="showInfo">去{{name}}学习</a>
        <!--    stop : 停止事件冒泡 event.stopPropagation() 发生事件冒泡 触发两次showInfo方法 -->
        <div class="outer" @click="showInfo">
<!--            成功阻止事件冒泡-->
            <button @click.stop="showInfo">点我去{{name}}学习</button>
<!--            阻止冒泡和默认行为  在后面添加即可 不讲究顺序-->
<!--            <a href="http://www.atguigu.com" @click.stop.prevent="showInfo">点我去{{name}}学习</a>-->
        </div>
<!--        once 事件只触发一次 只能触发一次-->
        <button @click.once="showInfo">点我去{{name}}学习</button>
<!--        capture 使用事件捕获模式 事件的触发流程 事件捕获 -> 事件冒泡(执行时期) 默认执行是 2 1 加了capture就变成了 1 2 -->
        <div class="box1" @click.capture="showMsg(1)">
            <button @click="showMsg(2)"></button>
        </div>
<!--        self只有执行对象是本身的时候才会执行 只会输出2 不会输出1-->
        <div class="box1" @click.self="showMsg(1)">
            <button @click="showMsg(2)"></button>
        </div>
<!--        passive 事件会直接执行 不会等到 回调函数执行完毕才执行 scoll 是滚动条动 而wheel是鼠标滚轮动 而只有将回调函数执行完之后滚动条才改变 加了passive就会先执行事件-->
        <ul @wheel.passive="job">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script>
        Vue.config.productionTip = false;
        Vue.config.devtools = true;
        const vm = new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            },
            methods:{
                showInfo(e) {
                    // e.preventDefault();//阻止默认行为 js中的方式
                    // e.stopPropagation();//js中的阻止事件冒泡
                    alert('你好同学!!!');
                },
                showMsg(n) {
                    console.log(n);
                },
                job () {
                    for (let i = 0;i < 100000;i++) {
                        console.log("@");
                    }
                    console.log("累死了");
                }
            },
        });
    </script>
</body>
</html>